<template>
  <div class="box">
    <div class="searcharea">
      <!-- 搜索 -->
      <el-row>
        <el-col :span="24">
          <div class="query">
            <el-form :inline="true" :model="queryProductionTaskParam" class="demo-form-inline">
              <el-form-item label="计划名称">
                <el-input
                  v-model="queryProductionTaskParam.ProductionTaskName"
                  placeholder="请输入"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" :icon="Search" @click="SearchProductionTask()">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="contentarea">
      <!-- 功能按钮 -->
      <el-row>
        <el-col :span="24">
          <div class="functionbutton">
            <el-button type="danger" plain>导出</el-button>
          </div>
        </el-col>
      </el-row>

      <!-- 数据表格 -->
      <el-row>
        <el-col :span="24">
          <div>
            <el-table
              v-loading="tableloading"
              :data="tableData"
              border
              style="width: 100%"
              max-height="400px"
              :selection="selectedRows"
              @selection-change="handleSelectionChange"
              @row-click="getRowkey"
              show-overflow-tooltip
              empty-text="暂无数据"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column type="index" label="序号" />
              <el-table-column prop="productionTaskNO" label="任务编码" width="180" />
              <el-table-column prop="productionTaskName" label="任务名称" width="180" />
              <el-table-column prop="workOrder.workOrderName" label="工单名称" width="180" />
              <!-- <el-table-column prop="productBill.productBillName" label="产品名称" width="180" /> -->
              <el-table-column prop="schedulingPlan.schedulingPlanName" label="计划名称" width="180" />
              <el-table-column prop="workStation.workStationName" label="站台名称" width="180" />
              <el-table-column prop="userinfo.userName" label="员工" width="180" />
              <el-table-column prop="process.processName" label="工序名称" width="180" />

              <el-table-column prop="status" label="状态" width="120" align="center">
                <template #default="scope">
                  <el-button type="info" round size="small" v-if="scope.row.status === 0">创建</el-button>
                  <el-button type="primary" round size="small" v-else-if="scope.row.status === 1">生产中</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="创建人" />
              <el-table-column prop="updator" label="修改人" />
              <el-table-column prop="createtime" label="创建时间" width="180" :formatter="formatColumnTime" />
              <el-table-column prop="updateDate" label="更新时间" width="180" :formatter="formatColumnTime" />
              <el-table-column fixed="right" label="操作" width="140">
                <template #default="scope">
                  <el-button type="primary" plain size="small" @click="UpdateProductionTask(scope.row)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>

        <el-dialog v-model="UpdateDialogVisible" title="修改生产任务" width="30%" align-center>
          <el-form
            ref="UpdateProductionTaskFormRef"
            :model="UpdateProductionTaskForm"
            :rules="CreateProductionTaskRules"
            label-width="auto"
            style="padding: 20px"
          >
            <el-form-item label="生产任务编号">
              <el-input v-model="UpdateProductionTaskForm.ProductionTaskNo" disabled placeholder="不输入则自动生成">
              </el-input>
            </el-form-item>
            <el-form-item prop="ProductionTaskName" label="生产任务名称">
              <el-input v-model="UpdateProductionTaskForm.ProductionTaskName" placeholder="请输入生产任务名称">
              </el-input>
            </el-form-item>
            <el-form-item prop="Address" label="生产任务地址">
              <el-input v-model="UpdateProductionTaskForm.Address" placeholder="请输入"> </el-input>
            </el-form-item>
          </el-form>

          <template #footer>
            <div class="dialog-footer">
              <el-button @click="UpdateDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="UpdateProductionTaskDialog(UpdateProductionTaskFormRef)"
                >确认</el-button
              >
            </div>
          </template>
        </el-dialog>
      </el-row>

      <!-- 分页 -->
      <el-row>
        <el-col :span="24">
          <div class="demo-pagination-block" style="display: flex; justify-content: flex-end">
            <el-config-provider :locale="zhCn">
              <el-pagination
                v-model:current-page="queryProductionTaskParam.PageIndex"
                v-model:page-size="queryProductionTaskParam.PageSize"
                :page-sizes="[100, 200, 300, 400]"
                :small="false"
                :disabled="false"
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="queryProductionTaskParam.totalCount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              >
              </el-pagination>
            </el-config-provider>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { ApiGetProduction_ProductionTaskPageListAsync } from '../../api/production/ProductionProductionTaskApi'
import { formatTime } from '../../utils/index'

interface ProductionTask {
  id: string
}

// --------------------------数据列表------------------------------
// 定义接口和类型
interface ProductionTaskParam {
  ProductionTaskName: string | null
  PageIndex: number
  PageSize: number
  totalCount: number
}
const selectedRows = ref<string[]>([]) // 存储选中的行数据
const tableloading = ref(false)
// 查询参数
const queryProductionTaskParam: ProductionTaskParam = reactive({
  ProductionTaskName: null,
  PageIndex: 1,
  PageSize: 100,
  totalCount: 11
})

// 表格数据
const tableData = ref([])

// 搜索生产任务
const SearchProductionTask = () => {
  tableloading.value = true
  ApiGetProduction_ProductionTaskPageListAsync(queryProductionTaskParam)
    .then((res) => {
      tableData.value = res.data.data
      queryProductionTaskParam.PageIndex = res.data.pageIndex
      queryProductionTaskParam.PageSize = res.data.pageSize
      queryProductionTaskParam.totalCount = res.data.totalCount
    })
    .finally(() => {
      tableloading.value = false
    })
}

// 获取用户选择项
const handleSelectionChange = (val: ProductionTask[]) => {
  selectedRows.value = val.map((item) => item.id)
}

// 时间转换
const formatColumnTime = (row: object, column: string, time: string | number | Date) => {
  if (time === null) {
    return ''
  }

  if (typeof time === 'string' || typeof time === 'number') {
    return formatTime(time)
  } else {
    return formatTime(time.getTime())
  }
}

// 每页条数
const handleSizeChange = (e: number) => {
  queryProductionTaskParam.PageSize = e
  SearchProductionTask()
}

// 当前页变化
const handleCurrentChange = (e: number) => {
  queryProductionTaskParam.PageIndex = e
  SearchProductionTask()
}

// 初次加载数据
onMounted(() => {
  SearchProductionTask()
})
</script>



<style lang="less"  scoped>
@import '../../assets/globle/index.css';
</style>
